<template>
     <div style="margin:50px 0 50px">
    <!-- 幻灯片 -->
    <div class="box">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in imgList" :key="index">
          <img class="swipeImg" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品信息 -->
    <div class="box">
    <van-row class="row">
        <van-col class="title" span="20">华为（HUAWEI）荣耀6Plus 16G双4G版</van-col>
        <van-col span="20" class="car_price">
            市场价：
          <s>￥2499</s>&nbsp; 销售价：
          <span class="newPrice">¥2195</span>
        </van-col>
        <van-col class="car_price">
          <van-row>
            <van-col>购买数量：</van-col>
            <van-col>
              <van-stepper v-model="carCont" />
            </van-col>
          </van-row>
        </van-col>
        <van-col class="car_price" span="20">
          <van-button size="small" type="info">立即购买</van-button>
          <van-button size="small" type="danger" >加入购物车</van-button>
        </van-col>
    </van-row>
    </div>
    <!-- 商品参数 -->
     <div class="box">
       <van-row class="row">
        <van-col class="title" span="20">商品参数</van-col>
        <van-col span="20" class="car_price">
          商品货号：SD9102356032
        </van-col>
        <van-col class="car_price">库存情况：60件</van-col>
        <van-col class="car_price" span="20">上架时间：2015-04-19 16:51:03</van-col>
        <van-col style="width:100%">
          <van-button type="info" plain class="btNcar">图文介绍</van-button>
        </van-col>
        <van-col style="width:100%">
          <van-button type="danger" plain class="btNcar">商品评论</van-button>
        </van-col>
    </van-row>
     </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      carCont: '',
      imgList: []
    }
  },
  created () {
    this.id = this.$route.query.goodsId
    this.getImgList()
    // this.getCarPrice()
    // this.getSession()
    // this.$store.commit('getCarNum')
  },
  methods: {
    async getImgList () {
      const { data: res } = await this.$http.get(
        '/api/getthumimages/87'
      )
      //   console.log(this.id)
      this.imgList = res.message
      // console.log(this.imgList)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  padding: 10px;
  border-radius: 5px;
  line-height: 30px;
}
.van-swipe {
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  height: 300px;
}
.row {
  border-radius: 5px;
  border: 1px solid #c0c0c0;
  padding: 20px;
}
.title {
  width: 100%;
  border-bottom: 1px solid #c0c0c0;
}
.car_price {
  padding: 10px 10px 0px 10px;
  color: #8f8f94;
  font-size: 14px;
}
.car_parameter {
  padding: 0px 10px 0px 20px;
  color: #8f8f94;
  font-size: 14px;
}
.newPrice {
  color: red;
  font-weight: bold;
}
.row .car_parameter:last-child {
  border-bottom: 1px solid #c0c0c0;
}
.btNcar {
  width: 100%;
}
.swipeImg {
  width: 300px;

  display: block;
  margin: 0 auto;
}
.van-button{
  margin: 5px;
}
</style>
